<template>
    <div class="box">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="getActiveListHandler">
            <el-tab-pane :label="item.name" :name="item.key" v-for="item, index in activeList"></el-tab-pane>
        </el-tabs>
        <el-card :body-style="{ padding: '0px' }" class="card-box">
            <search-header :options="selectList" @update:modelValue="searchHandler" v-model="searchText"
                @searchHandler="search" @selectChange="selectChangeHandler" @resetting="resettingHandler">
            </search-header>
            <public-header 
            :activeName="activeName"
            @addHandler="addHandler" 
            @refresh-handler="refreshHandler" 
            @grounding="groundingHandler(1)"
            @undercarriage="undercarriageHandler(0)" 
            @batchDeleteHandler="batchDeleteHandler"
            @resumeHandler="resumeHandler"
            @removeDeleteHandler="removeDeleteHandler">
            </public-header>
            <el-table :data="goodsList" style="width: 100%" :highlight-current-row="true" v-loading="loading"
                @select="selectHandler">
                <el-table-column type="selection" width="40" />
                <el-table-column label="商品" width="280">
                    <template #default="{ row }">
                        <div class="shopping-box">
                            <el-image style="width: 80px; height: 60px" :src="row?.cover"></el-image>
                            <div>
                                <p>{{ row.title }}</p>
                                <p><span>${{ row.min_price }}</span><span>${{ row.min_oprice }}</span></p>
                                <p>分类:{{ row.category?.name }}</p>
                                <p>创建世界:{{ row.create_time }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sale_count" label="实际销量" width="80" align="center" />
                <el-table-column label="商品状态" width="100" align="center">
                    <template #default="{ row }">
                        <el-tag class="ml-2" :type="row.status ? 'success' : 'danger'">{{ row.status ? "上架" :
                            "仓库" }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="审核状态" width="180" align="center">
                    <template #default="{ row }">
                        <div v-if="row.ischeck == 0" class="shenhe">
                            <el-button type="success" size="small" plain>审核通过</el-button>
                            <el-button type="danger" size="small" plain>审核拒绝</el-button>
                        </div>
                        <span v-else>{{ row.ischeck === 1 ? "通过" : "拒绝" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="总库存" width="70" align="center" />
                <el-table-column prop="address" label="操作" align="center" width="460">
                    <template #default="{ row }">
                        <el-button text size="small" type="primary" @click="updataHandler(row)">修改</el-button>
                        <el-button text size="small"
                            :type="(row.sku_type == 0 && !row.sku_value) || (row.sku_type == 1 && !row.goods_skus.length) ? 'danger' : 'primary'">商品规格</el-button>
                        <el-button text size="small"
                            :type="row.goods_banner.length === 0 ? 'danger' : 'primary'" @click="setBannerHandler(row)">设置轮播图</el-button>
                        <el-button text size="small" :type="!row.content ? 'danger' : 'primary'">商品详情</el-button>
                        <el-button text size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <el-pagination background layout="prev, pager, next" :total="total"
                    @current-change="currentChangeHandler" />
            </div>
        </el-card>
        <!-- 新增修改抽屉 -->
        <drawer ref="drawerHtml" :width="700" @submitHandler="submitHandler">
            <template #title>{{ drawerTitle }}</template>
            <template #main>
                <el-form :model="form" label-width="120px">
                    <el-form-item label="商品名称">
                        <el-input v-model="form.title" />
                    </el-form-item>
                    <el-form-item label="封面">
                        <template #default>
                            <select-image ref="selectImageHtml" 
                            :props_imageArr="form.cover"
                            @imageItemHandler="imageItemHandler">
                            </select-image>
                        </template>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-select v-model="form.category_id" class="m-2" placeholder="Select" size="large">
                            <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品描述">
                        <el-input v-model="form.desc" :rows="2" type="textarea" placeholder="Please input" />
                    </el-form-item>
                    <el-form-item label="单位">
                        <el-input v-model="form.unit" />
                    </el-form-item>
                    <el-form-item label="总库存">
                        <el-input-number v-model="form.stock" class="mx-4" :min="0" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="库存预警">
                        <el-input-number v-model="form.min_stock" class="mx-4" :min="0" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="最低销售价">
                        <el-input-number v-model="form.min_price" class="mx-4" :min="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="最低原价">
                        <el-input-number v-model="form.min_oprice" class="mx-4" :min="1" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="库存显示">
                        <el-radio-group v-model="form.stock_display" class="ml-4">
                            <el-radio :label="0" size="large">隐藏</el-radio>
                            <el-radio :label="1" size="large">显示</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否上架">
                        <el-radio-group v-model="form.status" class="ml-4">
                            <el-radio :label="0" size="large">放入仓库</el-radio>
                            <el-radio :label="1" size="large">立即上架</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </template>
        </drawer>

        <!-- 设置轮播图 -->
        <bannerDrawer 
        ref="bannerDrawerHtml"
        @submitSetBannerHandler="submitBannerHandler"
        @getBannerList="getBannerList"></bannerDrawer>
    </div>
</template>
<script setup lang='ts'>
import searchHeader from './components/searchHeader.vue'
import publicHeader from './components/publicHeader.vue'
import drawer from './components/drawer.vue'
import bannerDrawer from './components/setBanner.vue'
import selectImage from '@/components/selectImage.vue'
import { ref, reactive, onMounted } from 'vue'
import {
    goodsListApi,
    addGoodsApi,
    updataGoodsApi,
    changeStatusApi,
    batchDeleteApi,
    batchResumeApi,
    removeDeleteApi,
    setBannerApi
} from '@/api/goods'
import type { addGoods } from '@/config/goods'
import { ElMessage } from 'element-plus'
// 加载
const loading = ref(false)
// 新增表单信息
const form: addGoods = reactive({
    title: '',
    category_id: null,
    cover: '',
    desc: '',
    unit: '件',
    stock: 100,
    min_stock: 10,
    status: 0,
    stock_display: 0,
    min_price: 0,
    min_oprice: 0
})
// 图库开关节点
const selectImageHtml = ref()
// 新增修改仓库
const drawerHtml = ref()
// 搜索输入框
const searchText = ref()
// 总页数
const total = ref(0)
const activeName = ref('all')
const activeList = ref([
    {
        key: 'all',
        name: '全部'
    },
    {
        key: 'checking',
        name: '审核中'
    },
    {
        key: 'saling',
        name: '出售中'
    },
    {
        key: 'off',
        name: '已下架'
    },
    {
        key: 'min_stock',
        name: '库存预警'
    },
    {
        key: 'delete',
        name: '回收站'
    }
])
const selectId = ref()
// 商品列表当前页数
const page = ref(1)
// 商品列表信息
const goodsList = ref([])
// 下拉菜单信息
const selectList = ref()
// 获取商品信息
const getActiveListHandler = () => {
    loading.value = true
    goodsListApi(page.value, activeName.value, searchText.value, selectId.value).then(res => {
        total.value = res.data.data.totalCount
        goodsList.value = res.data.data.list
        selectList.value = res.data.data.cates
        loading.value = false
    })
}
// 分页改变获取新列表
const currentChangeHandler = (e: number) => {
    if (typeof e !== 'number') return
    page.value = e
    getActiveListHandler()
}
// 搜索
const search = () => {
    getActiveListHandler()
}
const selectChangeHandler = (e: number) => {
    selectId.value = e
}
const searchHandler = (e: any) => {
    searchText.value = e
}
// 重置按钮
const resettingHandler = () => {
    searchText.value = ''
}
// 刷新按钮
const refreshHandler = () => {
    getActiveListHandler()
}
const drawerTitle = ref()
// 新增
const addHandler = () => {
    drawerHtml.value.openDrawer()
    drawerTitle.value = '新增'
}
const updataId = ref()
// 修改
const updataHandler = (row: any) => {
    drawerHtml.value.openDrawer()    
    drawerTitle.value = '修改'
    updataId.value = row.id
        form.title = row.title,
        form.category_id = row.category_id,
        form.cover = row.cover,
        form.desc = row.desc,
        form.unit = row.unit,
        form.stock = row.stock,
        form.min_stock = row.min_stock,
        form.status = row.status,
        form.stock_display = row.stock_display,
        form.min_price = parseInt(row.min_price),
        form.min_oprice = parseInt(row.min_oprice)
}
const imageItemHandler = (e: any) => form.cover = e
// 提交按钮
const submitHandler = () => {
    if (drawerTitle.value === '新增') {
        addGoodsApi(form).then(res => {
            if (res.data.msg === 'ok') {
                getActiveListHandler()
                form.title = '',
                    form.category_id = null,
                    form.cover = '',
                    form.desc = '',
                    form.unit = '件',
                    form.stock = 100,
                    form.min_stock = 10,
                    form.status = 0,
                    form.stock_display = 0,
                    form.min_price = 0,
                    form.min_oprice = 0
                drawerHtml.value.closeDrawer()
            }
        })
    }
    if (drawerTitle.value === '修改') {
        updataGoodsApi(updataId.value, form).then(res => {
            if (res.data.msg === 'ok') {
                getActiveListHandler()
                form.title = '',
                    form.category_id = null,
                    form.cover = '',
                    form.desc = '',
                    form.unit = '件',
                    form.stock = 100,
                    form.min_stock = 10,
                    form.status = 0,
                    form.stock_display = 0,
                    form.min_price = 0,
                    form.min_oprice = 0
                drawerHtml.value.closeDrawer()
            }
        })
    }
}
// 多选框
const selectArr = ref([])
const selectHandler = (selection: any, row: any) => {
    selectArr.value = selection.map((item: any) => item.id)
}
// 上架
const groundingHandler = (e: any) => {
    changeStatusApi(selectArr.value, e).then(res => {
        if (res.data.msg === 'ok') {
            ElMessage({
                type: 'success',
                message: '修改成功'
            })
            getActiveListHandler()
        }
    })
}
// 下架
const undercarriageHandler = (e: number) => {
    changeStatusApi(selectArr.value, e).then(res => {
        if (res.data.msg === 'ok') {
            ElMessage({
                type: 'success',
                message: '修改成功'
            })
            getActiveListHandler()
        }
    })
}
// 批量删除
const batchDeleteHandler = async () => {
    const res = await batchDeleteApi(selectArr.value)
    if (res.data.data === 'ok') {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        getActiveListHandler()
    }
}
// 恢复商品
const resumeHandler = async () => {
    const res = await batchResumeApi(selectArr.value)
    if (res.data.data === 'ok') {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        getActiveListHandler()
    }
}
// 彻底删除商品
const removeDeleteHandler = async() => {
    const res = await removeDeleteApi(selectArr.value)
    if (res.data.data === 'ok') {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        getActiveListHandler()
    }
}

// 设置轮播图
const bannerId = ref()
const bannerDrawerHtml = ref()
const setBannerHandler = (row:any) => {
    bannerDrawerHtml.value.openBannerDrawer()
    bannerId.value = row.id
}
const bannerList = ref()
const getBannerList = (e:any) => {
    bannerList.value = e
}
// 提交轮播图
const submitBannerHandler = async() => {
    const res = await setBannerApi(bannerId.value,bannerList.value)
    console.log(res);
    if(res.data.msg === 'ok'){
        ElMessage({
            type : 'success',
            message : '添加成功'
        })

    }
    
}
onMounted(() => {-
    getActiveListHandler()
})
</script>
<style scoped lang='scss'>
.box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-box {
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow-y: scroll;
}

.shopping-box {
    display: flex;

    >div {
        padding-left: 5px;

        >p:nth-child(1) {
            font-size: 16px;
        }

        >p:nth-child(2) {
            font-size: 14px;

            >span:nth-child(1) {
                color: red;
                margin-right: 5px;
            }
        }

        >p:nth-child(3),
        >p:nth-child(4) {
            font-size: 12px;
            color: #999;
        }
    }
}

.shenhe {
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-button {
        width: 100px;
    }

    .el-button:nth-child(2) {
        margin: 0;
        margin-top: 3px;
    }
}

.bottom {
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>